<template>
	<div class="app-container foSi14">
		<div class="dis mar-bott20">
			<div>
				<div class="hei20 foSi13" style="color: #838383;">操作时间</div>
				<el-date-picker v-model="search.birthday_start" style="width: 140px" size="small" type="date"
					placeholder="开始时间" />
				<el-date-picker v-model="search.birthday_end" class="mar-left10" style="width: 140px;" size="small"
					type="date" placeholder="截至日期" />
			</div>
			<div class="mar-left10">
				<div class="hei20 foSi13" style="color: #838383;">业务类型</div>
				<el-select v-model="search.typeIndex" size="small" style="width: 140px">
					<el-option v-for="(item, index) in course_type" :key="index" :label="item.name" :value="item.id" />
				</el-select>
			</div>
			<div class="mar-left10">
				<div class="hei20 foSi13" style="color: #838383;">会员</div>
				<el-input v-model="search.memberName" placeholder="姓名/手机号" size="small" style="width: 140px;" />
			</div>
			<div class="mar-left10 mar-top20 dis disAl">
				<el-button type="primary" class=" bac6b7" size="small" @click="getList">搜索</el-button>
			</div>
		</div>
		<el-table key="table0" v-loading="listLoading" :data="list" stripe style="width: 100%"
			:row-style="{ background: '#f2f2f2' }">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column label="业务类型">
				<template slot-scope="{row}">
					<div style="display:flex;">
						<span style="height:30px; line-height: 30px;">{{ getType(row.event_type) }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="卡号">
				<template slot-scope="{row}">
					<div style="display:flex;">
						<span style="height:30px; line-height: 30px;">{{ row.card_number }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="卡名称">
				<template slot-scope="{row}">
					<div style="display:flex;">
						<span style="height:30px; line-height: 30px;">{{ row.card_name }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="持卡人">
				<template slot-scope="{row}">
          <span>{{ row.realname?row.realname:row.nickname }}</span>
				</template>
			</el-table-column>

			<el-table-column label="操作时间">
				<template slot-scope="{row}">
					<span>{{ getTime(row.createtime) }}</span>
				</template>
			</el-table-column>

			<el-table-column label="操作人">
				<template slot-scope="{row}">
					<span>{{ row.staff_name==null?'系统':row.staff_name }}</span>
				</template>
			</el-table-column>

			<el-table-column width="210px" align="center" label="操作">
				<template slot-scope="{row}">
					<el-button type="primary" size="small" icon="el-icon-set-up" @click="open(row.id,2)">
						详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />

		<div v-if="is_show" class="m-dialog-bg" />
		<div v-if="is_show" class="m-dialog-box hide">
			<div class="dialog-content">
				<div class="dialog-content-header">
					<span class="dialog-title">查看详情（开卡）</span>
					<span class="dialog-close js-dialog_close" @click="close()" />
				</div>
				<div class="dialog-content-main">
					<div class="dialog-card-type">
						<img loading="lazy" :src="detail.pic"
                 style="width: 200px"
							alt="">
					</div>

					<div class="dialog-card-info flex-detail-box">
						<h3 class="base-title">会员卡信息</h3>

						<div class="field-box clear">
							<div class="item-l">
								<span class="label">卡号</span>
								<span class="fr">{{ detail.card_number }}</span>
							</div>
							<div class="item-r">
								<span class="label">卡名称</span>
								<span class="fr">{{ detail.card_name }}</span>
							</div>
						</div>
						<div class="field-box clear">
							<div class="item-l">
								<span class="label">持卡人</span>
                <span class="fr">{{ detail.realname?detail.realname:detail.nickname }} / {{ detail.sex==1?'男':'女' }}</span>
							</div>
							<div class="item-r">
								<span class="label">手机</span>
								<span class="fr">{{ detail.tel }}</span>
							</div>
						</div>
						<div class="field-box clear">
							<div class="item-l">
								<span class="label">余额</span>
								<span class="fr">{{ detail.charge_card_balance }}</span>
							</div>
							<div class="item-r">
								<span class="label">有效期至</span>
								<span class="fr">{{ detail.cards_period }}</span>
							</div>
						</div>
					</div>
					<div class="flex-detail-box mt-20">
						<div class="field-box clear">
							<div class="item-r">
								<span class="label">发卡时间</span>
								<span class="fr">{{ detail.cards_hairpin }}</span>
							</div>
							<div class="item-r">
								<span class="label">发卡场馆</span>
								<span class="fr">{{ detail.brand_name }}</span>
							</div>
						</div>
						<div class="field-box">
							<div class="item clear">
								<span class="label">备注</span>
                <div>{{ detail.notes }}</div>
							</div>
						</div>

						<div class="field-box mt-20 clear">
							<div class="item-l">
								<span class="label">操作人</span>
								<span class="fr">{{ detail.staff_name }}</span>
							</div>
							<div class="item-r">
								<span class="label">开卡时间</span>
								<span class="fr">{{ detail.cards_activate }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-content-footer">
					<el-button type="info" @click="close">关闭</el-button>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import Pagination from '@/components/Pagination'
  import {
    recordAlter,
    recordAlterDetail
  } from '@/api/information';
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination

	export default {
		name: 'ArticleList',
		components: {
			Pagination
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				search: {
					birthday_start: null,
					birthday_end: null,
					memberName: null,
					typeIndex: null
				},
				list: null,
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 10
				},
				coaches: {},
				coachesIndex: '',
				course_type: [{
          id:0,
          name:'不指定'
        },{
          id:2,
          name:'开卡'
        },{
          id:3,
          name:'请假'
        },{
          id:4,
          name:'退卡'
        },{
          id:5,
          name:'补卡'
        },{
          id:6,
          name:'挂失'
        },{
          id:7,
          name:'续卡'
        },{
          id:8,
          name:'转卡'
        },{
          id:11,
          name:'解挂'
        }],
				is_show: false,
				is_type: 1,
        detail:[]
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '变更记录',
				url: '/information/recordAlter',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})

			this.getList()
		},
		methods: {
      getList() {
        this.listLoading = true
        var data = {
          member:this.search.memberName,
          start_time:this.search.birthday_start,
          end_time:this.search.birthday_end,
          type:this.search.typeIndex,
          limit:this.listQuery.limit
        }
        recordAlter(data).then(response => {
          const {
            data
          } = response
          this.total = data.total
          this.list = data.data
          this.listLoading = false
        });
      },
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			},
      open(id, type) {
        // type == 1签到 type == 2详情
        this.is_type = type
        this.is_show = true
        this.getRecordAlterDetail(id)
      },
      getRecordAlterDetail(id){
        recordAlterDetail({id:id}).then(response =>{
          const {
            data
          } = response
          this.detail = data
        })
      },
			close() {
				this.is_show = false
			},
      getType(type){
        if(type == 1){
          return '发卡';
        }else{
          var types = '';
          this.course_type.forEach((item, index) => {
            if(type == item.id){
              types = item.name;
            }
          });
          return types;
        }
      },
      getTime(time) {
        let date = new Date(time*1000);
        let year = date.getFullYear();
        // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
        let month = date.getMonth() + 1;
        // let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" +seconds;
      },
		}
	}
</script>

<style scoped>
	.app-container {
		font-size: 14px;
	}

	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #41c3a8;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #616b74
} */
	.m-dialog-bg {
		position: fixed;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.m-dialog-box {
		position: fixed;
		width: 962px;
		z-index: 1200;
		bottom: 50%;
		left: 50%;
		top: 200px;
		transform: translate(-50%, -50%);
	}

	.dialog-content {
		background: #ffffff;
		border-radius: 10px;
	}

	.dialog-content .dialog-content-header {
		position: relative;
		padding: 30px 0 10px;
		font-size: 20px;
		line-height: 20px;
		border-bottom: 1px solid #d9d9d9;
		margin: 0 60px;
		font-weight: 700;
	}

	.dialog-content .dialog-content-main {
		padding: 20px 60px;
	}

	.dialog-content .dialog-content-footer {
		padding: 20px 30px 40px;
		text-align: center;
	}

	.dialog-content .dialog-content-header .dialog-close {
		position: absolute;
		right: 0;
		top: 28px;
		width: 24px;
		height: 24px;
		background: url(../../../public/img/close.svg) no-repeat 0 0;
		background-size: 24px 24px;
		cursor: pointer;
	}

	.flex-detail-box .base-title {
		height: 22px;
		font-size: 12px;
		color: #787878;
		margin-bottom: 0;
		line-height: 22px;
	}

	.flex-detail-box .field-box {
		margin-bottom: 2px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.flex-detail-box .field-box .item-l {
		border-right: 2px solid #ffffff;
	}

	.flex-detail-box .field-box .item-l,
	.flex-detail-box .field-box .item-r {
		float: left;
		width: 50%;
		padding: 5px 15px;
		box-sizing: border-box;
	}

	.mt-20 {
		margin-top: 20px;
	}

	.flex-detail-box .field-box .item {
		padding: 5px 15px;
	}

	.member-avatar-box {
		height: 82px;
	}

	.member-avatar-box .currentAvatar {
		float: left;
		width: 70px;
		height: 70px;
		margin-right: 15px;
		overflow: hidden;
	}

	.member-avatar-box .name-sex {
		float: left;
		line-height: 32px;
	}

	.member-avatar-box .currentAvatar img {
		border-radius: 6px;
		width: 100%;
		height: 100%;
	}

	.member-avatar-box .name-sex .name {
		margin-right: 20px;
		display: inline-block;
		max-width: 212px;
		line-height: 1.5;
		vertical-align: top;
	}

	.member-avatar-box .name-sex img {
		vertical-align: 2px;
		width: 18px;
		height: 18px;
	}
</style>
